<script setup>

    import { ref,onMounted } from 'vue'

    import {ElMessage} from 'element-plus'
    import { useRouter } from 'vue-router'

    import axios from 'axios'

    /**
     *  vue2 和 vue3 的写法:
     *    1、vue2 data、methods、mounted  api组件函数
     *    2、vue3  中 统一使用了 setup 语法 省略了上面的多个属性操作
     *
     *  数据的初始化:
     *     vue2   data() 函数进行初始化
     *     vue3   ref() 函数进行初始化 使用的时候    变量.value
     *            没有this 函数和属性都是直接使用
     */
     const addressId = ref(0);    //要提交的收货地址，也是默认选中的地址
     const addresses = ref([]);   //显示地址列表
     const cart = ref({});        //购物车

    //修改收货地址
    const changeAddress = (addressId)=>{
        addressId.value = addressId;
    }

    //查询当前用户的所有收货地址
   const initAddress = ()=> {
        axios.get("/address/findAddress").then(resp => {
            addresses.value = resp.data;
            //获取默认选中的地址id
            addresses.value.forEach(item => {
                if (item.isDefault == 1) {
                    addressId.value = item.id;
                }
            });
        })
    }

    //获取购物车数据
    const initCart = ()=>{
        axios.get("/cart/myCartDetails").then(resp => {
            cart.value = resp.data;
        })
    }

    const router = useRouter();

    const uniqueCode = ref('')     //唯一标识
    const disabled = ref(false)    //提交按钮不可用

    //提交订单
    const submitOrder = ()=>{

        disabled.value = true;

        //5秒后可点击
        setTimeout(() => {
            disabled.value = false;
        }, 5000);

        //需要提交2个参数，以请求体中发送
        axios.post(`/order/createOrder`,{
            uniqueCode: uniqueCode.value,
            addressId: addressId.value
        }).then(resp => {
            console.log(resp)
            //可以设置提交按钮不可用，2秒后再还原
            ElMessage.success(resp.data);
            console.log(resp.data);

            //过2秒后再跳转
            setTimeout(() => {
                //跳转到订单列表页面
                // router.push('/order').catch(error => error);
                // ElMessage.success("跳转到订单页面...");
            }, 2000);
        }).catch(error => {
            console.log(error)
            //输出错误信息
            ElMessage.error(error.response.data);
        });
    }

    onMounted(()=>{

        //创建提交的唯一标识
        uniqueCode.value = "WNXY_" + Date.now();
        console.log("提交订单，唯一标识：" + uniqueCode);

        initAddress()
        initCart();
    })

</script>

<template>
    <div class="main">
        <h1> 我是订单调提交结算页面 </h1>
        <el-tag>收货地址</el-tag>
        <el-select v-model="addressId" placeholder="请选择收货地址" style="width: 400px" size="small">
            <el-option v-for="item in addresses"
                       :key="item.id" :value="item.id"
                       :label="item.label"
                       @change="changeAddress">
            </el-option>
        </el-select>

        <el-card class="cart">
            <el-table :data="cart.itemList" style="width: 100%" stripe highlight-current-row
                      class="cart-table">
                <el-table-column type="index" width="55" label="序号">
                    <template #default="{$index}">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="书名">
                    <template #default="{row}">
                        《{{ row.name }}》
                    </template>
                </el-table-column>

                <el-table-column prop="image" label="图片">
                    <template #default="{row}">
                        <el-image style="height: 120px;"
                                  :src="$urlImage + row.image"
                                  fit="fit">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="单价">
                    <template #default="{row}">
                        &yen; {{ row.price.toFixed(2) }}
                    </template>
                </el-table-column>

                <el-table-column prop="quantity" label="数量">
                    <template #default="{row}">
                        <el-tag type="danger">{{ row.quantity }}本</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="sum" label="金额">
                    <template #default="{row}">
                        &yen; {{ row.sum.toFixed(2) }}
                    </template>
                </el-table-column>

            </el-table>

            <div class="cart-footer">
                <span>共有<span class="cart-number">{{ cart.amount }}</span>本书</span>
                <span>合计：<span style="color: red; font-size: 25px;">
          &yen; {{cart.totalPrice ? cart.totalPrice.toFixed(2) : 0 }}
         </span></span>
                <el-button type="primary"
                           @click="submitOrder">
                    <el-icon :size="18">
                        <ShoppingCartFull />
                    </el-icon>
                    提交订单
                </el-button>
            </div>
        </el-card>

    </div>
</template>

<style scoped>
    .main {
        padding: 5px;
    }


    .cart {
        margin-top: 10px;
    }

    .cart-table {
        border-radius: 10px;
    }

    .cart-footer {
        margin-top: 10px;
        text-align: right;
    }

    .cart-footer > * {
        margin: 10px;
    }

    .cart-number {
        color: red;
        font-size: 22px;
    }

</style>